<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:jsf="http://xmlns.jcp.org/jsf"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <style>
        .today {
            background: #7AA028;
        }
    </style>

    <div align="center">
        <h1><h:outputText value="Listado de Entrada de Productos"/></h1>
    </div>
    <div align="center" style="font-size: 15px;">
        <div class="today" style="width: 200px;">
            INGRESOS DE HOY 
            <strong>
                <h:outputText value="#{documentController.date}">
                    <f:convertDateTime pattern="yyyy-MM-dd" />
                </h:outputText>
            </strong>
        </div>
    </div>
    <hr/>
    <h:form>
        <div class="row">
            <div class="col-lg-4">
                <div class="input-group">
                    <span class="input-group-addon">NÚMERO DE DOCUMENTO: </span>
                    <input type="text" class="form-control" placeholder="Ejemplo: 000032" 
                           jsf:value="#{documentController.searchNumberDocument}"
                           jsf:onblur="value=value.toUpperCase()"/>
                </div>
            </div>
            <div class="col-lg-4">
                <!-- BUSQUEDA PARA TIENDA -->
                <div class="input-group">
                    <span class="input-group-addon">FECHA EMISIÓN: </span>
                    <p:calendar class="form-control" pattern="yyy-MM-dd" navigator="true"
                                value="#{documentController.searchDate}"/>
                </div>
            </div>
            <div class="col-lg-4">
                <p:commandLink styleClass="btn btn-default btn-primary" update=":formTabl:bformRag">
                    <i class="glyphicon glyphicon-search"/>
                    BUSCAR
                </p:commandLink>
            </div>
        </div>
    </h:form>
    <hr/>
    <h:form id="formTabl">
        <p:dataTable value="#{documentController.listInputDocument}" var="item" id="bformRag" lazy="true"
                     paginator="true" rows="20" rowStyleClass="#{item.equalsDateToday? 'today': null}"
                     paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  >
            <p:column width="5">
                <p:menuButton styleClass="menubutton-for-table">  
                    <p:menuitem value="Ver detalle" icon="ui-icon-person" update=":panelContent" 
                                action="#{documentController.inializeInputDocument(item.id)}">  
                        <f:setPropertyActionListener
                            target="#{navigationController.navigationContent}"
                            value="./pages/operation/register_product/views/detail_input_document.xhtml" />
                    </p:menuitem>
                    <p:menuitem value="Eliminar" icon="ui-icon-trash" style="color:red;"
                                onclick="alert('Falta añadir la funcionalidad: OJO Solo se cambiará de estado, no se borrará');">  
                    </p:menuitem>
                </p:menuButton>
            </p:column>
            <p:column headerText="Numero de Documento">
                #{item.numberDocument}
            </p:column>
            <p:column headerText="Tipo de Documento">
                #{item.typeDocument}
            </p:column>
            <p:column headerText="Total" sortBy="total">
                #{item.total}
            </p:column>
            <p:column headerText="Fecha de Ingreso" sortBy="inputDate">
                #{item.inputDate}
            </p:column>
            <p:column headerText="Tipo de Moneda" style="text-align: center;" width="25">
                #{item.typeMoney}
            </p:column>
        </p:dataTable>
    </h:form>


</ui:composition>
